<?php 
	$coord_client= ($_GET['coord_client']);
	echo $coord_client ;
 ?>
<html>
<head>
<title>Trouver Distance</title>
<meta type="description" content="Find the distance between two places on the map and the shortest route."/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<div class="emarge" id="accueil_content" style="background-image: url(accueil.gif); background-position:bottom center; background-repeat:no-repeat; height:97%">


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

	var location1;
	var location2;
	
	var address1;
	var address2;

	var latlng;
	var geocoder;
	var map;
	
	var line;
	
	var infowindow1;
	var infowindow2;
	var infowindow3;

	var distance;
	
	var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];
	
	var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
	
	
	function start(a1, a2)
	{
		document.getElementById("address1").value = a1; //livreur
		document.getElementById("address2").value = a2; //fournisseur
		
		initialize();
	}
	
	// finds the coordinates for the two locations and calls the showMap() function
	function initialize()
	{
		geocoder = new google.maps.Geocoder(); // creating a new geocode object
		
		// getting the two address values
		address1 = document.getElementById("address1").value;
		address2 = document.getElementById("address2").value;
		
		// finding out the coordinates
		if (geocoder) 
		{
			geocoder.geocode( { 'address': address1}, function(results, status) 
			{
				if (status == google.maps.GeocoderStatus.OK) 
				{
					//location of first address (latitude + longitude)
					location1 = results[0].geometry.location;
					
				} else 
				{
					alert("Geocode was not successful for the following reason: " + status);
				}
			});
			geocoder.geocode( { 'address': address2}, function(results, status) 
			{
				if (status == google.maps.GeocoderStatus.OK) 
				{
					//location of second address (latitude + longitude)
					location2 = results[0].geometry.location;
					// calling the showMap() function to create and show the map 
					showMap();
				} else 
				{
					alert("Geocode was not successful for the following reason: " + status);
				}
			});
		}
	}
	
	// creates and shows the map
	function showMap()
	{
	
		// center of the map (compute the mean value between the two locations)
		latlng = new google.maps.LatLng((location1.lat()+location2.lat())/2,(location1.lng()+location2.lng())/2);
		
		// get the map type value from the hidden field
		var maptype = document.getElementById("maptype").value;

		var typeId;
	
		if (maptype == "roadmap")
			typeId = google.maps.MapTypeId.ROADMAP;
		else if (maptype == "hybrid")
			typeId = google.maps.MapTypeId.HYBRID;
		else if (maptype == "satellite")
			typeId = google.maps.MapTypeId.SATELLITE;
		else if (maptype == "terrain")
			typeId = google.maps.MapTypeId.TERRAIN;
		
		// set map options
			// set zoom level
			// set center
			// map type
		var mapOptions = 
		{
			zoom: 1,
			center: latlng,
			mapTypeId: typeId
		};
		
		// create a new map object
			// set the div id where it will be shown
			// set the map options
		map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
		
		// event listener to update the map type
		google.maps.event.addListener(map, 'maptypeid_changed', function() {
			maptype = map.getMapTypeId();
			document.getElementById('maptype').value = maptype;
		});
		
		// custom marker
		var rabbit = new google.maps.MarkerImage('distance-finder-custom-marker-image.png');
	
				
		// create the markers for the two locations		
		var marker1 = new google.maps.Marker({
			map: map, 
			position: location1,
			title: "Adresse de client",
			//icon: rabbit,
			draggable: true
		});
		
		var marker2 = new google.maps.Marker({
			map: map, 
			position: location2,
			title: "Adresse de livreur",
			//icon: rabbit,
			draggable: true
		});
		
		var marker3 = new google.maps.Marker({
			map: map, 
			position: new google.maps.LatLng(36.432264279980735, 10.138948534375004),
			title: "Adresse de fournisseur",
			//icon: rabbit,
			draggable: true
		});
		
		var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
		
		// create the text to be shown in the infowindows
		var text1 = '<div id="content">'+
				'<h1 id="firstHeading">First location</h1>'+
				'<div id="bodyContent">'+
				'<p>Coordinates: '+location1+'</p>'+
				'<p>Address: '+address1+'</p>'+
				'</div>'+
				'</div>';
				
		var text2 = '<div id="content">'+
			'<h1 id="firstHeading">Second location</h1>'+
			'<div id="bodyContent">'+
			'<p>Coordinates: '+location2+'</p>'+
			'<p>Address: '+address2+'</p>'+
			'</div>'+
			'</div>';
			
		var text3 = '<div id="content">'+
			'<h1 id="firstHeading">Third location</h1>'+
			'<div id="bodyContent">'+
			'<p>Coordinates: '+location2+'</p>'+
			'<p>Address: '+address2+'</p>'+
			'</div>'+
			'</div>';	
		
		// create info boxes for the two markers
		infowindow1 = new google.maps.InfoWindow({
			content: text1
		});
		infowindow2 = new google.maps.InfoWindow({
			content: text2
		});
		infowindow3 = new google.maps.InfoWindow({
			content: text3
		});

		// add action events so the info windows will be shown when the marker is clicked
		google.maps.event.addListener(marker1, 'click', function() {
			infowindow1.open(map,marker1);
		});
		google.maps.event.addListener(marker2, 'click', function() {
			infowindow2.open(map,marker2);
		});
		google.maps.event.addListener(marker3, 'click', function() {
			infowindow3.open(map,marker3);
		});
		
		// add action events for dragging the markers
		google.maps.event.addListener(marker1, 'dragend', function() {
			location1 = marker1.getPosition();
			drawRoutes(location1, location2);
		});
		
		google.maps.event.addListener(marker2, 'dragend', function() {
			location2 = marker2.getPosition();
			drawRoutes(location1, location2);
		});
		
		// initialize directions service
		directionsService = new google.maps.DirectionsService();
		directionsDisplay = new google.maps.DirectionsRenderer(
		{
			suppressMarkers: true,
			suppressInfoWindows: true
		});
		
		directionsDisplay.setMap(map);
		
		drawRoutes(location1, location2);
	}
	
	function drawRoutes(location1, location2)
	{
		// show new addresses
		
		geocoder = new google.maps.Geocoder(); // creating a new geocode object
		
		if (geocoder) 
		{
			geocoder.geocode({'latLng': location1}, function(results, status) 
			{
				if (status == google.maps.GeocoderStatus.OK) 
				{
					if (results[0]) 
					{
						address1 = results[0].formatted_address;
						document.getElementById("address1").value = address1;
					}
				} 
				else 
				{
					alert("Geocoder failed due to: " + status);
				}
			});
		}

		if (geocoder) 
		{
			geocoder.geocode({'latLng': location2}, function(results, status) 
			{
				if (status == google.maps.GeocoderStatus.OK) 
				{
					if (results[0]) 
					{
						address2 = results[0].formatted_address;
						document.getElementById("address2").value = address2;
						continueShowRoute(location1, location2);
					}
				} 
				else 
				{
					alert("Geocoder failed due to: " + status);
				}
			});
		}
	}
	
	function continueShowRoute(location1, location2)
	{
		// hide last line
		if (line)
		{
			line.setMap(null);
		}
	
		// show a line between the two points
		line = new google.maps.Polyline({
			map: map, 
			path: [location1, location2],
			strokeWeight: 7,
			strokeOpacity: 0.8,
			strokeColor: "#FFAA00"
		});
		
		// compute distance between the two points
		var R = 6371; 
		var dLat = toRad(location2.lat()-location1.lat());
		var dLon = toRad(location2.lng()-location1.lng());
		
		var dLat1 = toRad(location1.lat());
		var dLat2 = toRad(location2.lat());
		
		var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
				Math.cos(dLat1) * Math.cos(dLat1) * 
				Math.sin(dLon/2) * Math.sin(dLon/2); 
		var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
		var d = R * c;
		
		document.getElementById("distance_direct").innerHTML = "<br/>La distance par route direct est : "+d;
		
		var travelmode = document.getElementById("travelMode").value;

		// get the selected travel mode
		if (travelmode == "driving")
			travel = google.maps.DirectionsTravelMode.DRIVING;
		else if (travelmode == "walking")
			travel = google.maps.DirectionsTravelMode.WALKING;
		else if (travelmode == "bicycling")
			travel = google.maps.DirectionsTravelMode.BICYCLING;
		
		// find and show route between the points
		var request = {
			origin:location1, 
			destination:location2,
			travelMode: travel
		};
		directionsService.route(request, function(response, status) 
		{
			if (status == google.maps.DirectionsStatus.OK) 
			{
				directionsDisplay.setDirections(response);
				distance = "La distance par la route choisit est : "+response.routes[0].legs[0].distance.text;
				distance += "<br/><br/>Le Temps approximatif par "+travelmode+" est: "+response.routes[0].legs[0].duration.text;
				document.getElementById("distance_road").innerHTML = distance;
			}
			else
			{
				alert('error: ' + status);
			}
		});
		
		// update text in infowindows
		var text1 = '<div id="content">'+
				'<h1 id="firstHeading">Adresse client</h1>'+
				'<div id="bodyContent">'+
				'<p>Coordinates: '+location1+'</p>'+
				'<p>Address: '+address1+'</p>'+
				'</div>'+
				'</div>';
				
		var text2 = '<div id="content">'+
			'<h1 id="firstHeading">Adresse Livreur</h1>'+
			'<div id="bodyContent">'+
			'<p>Coordinates: '+location2+'</p>'+
			'<p>Address: '+address2+'</p>'+
			'</div>'+
			'</div>';
			
		var text3 = '<div id="content">'+
			'<h1 id="firstHeading">Adresse Fournisseur</h1>'+
			'<div id="bodyContent">'+
			'<p>Coordinates: '+location2+'</p>'+
			'<p>Address: '+address2+'</p>'+
			'</div>'+
			'</div>';	
			
		infowindow1.setContent(text1);
		infowindow2.setContent(text2);
		infowindow3.setContent(text3);

		
	
	}
	
	function toRad(deg) 
	{
		return deg * Math.PI/180;
	}
</script>
<link rel="stylesheet" type="text/css" href="styles.css" media="all"/>

</head>

<body>		
	
	<div id="fb-root"></div>
	
<fb:login-button autologoutlink='true' perms='email,user_birthday,status_update,publish_stream'></fb:login-button>
	<div id="form" style="width:100%; height:20%; font-family: 'Times New Roman', Times, serif;">
		<input id="maptype" type="hidden" value="roadmap"/>
        
        		
<table width="438" border=6 cellspacing=12 cellpadding=5>
  <tr>
    <th colspan="2" scope="col"><p>Trouver la distance Client / Livreur </p>
      <p>&nbsp;</p></th>
    </tr>
  <tr>
      <th width="180" height="45" align="center" bgcolor="#99CCFF" scope="row"><p>Adresse de client:</p></th>
    <th bgcolor="#6699CC" scope="row"><p><input type="text" name="address3" id="address3" size="30"/><p></th>
  </tr> 
  <tr>
    <th width="180" height="45" align="center" bgcolor="#99CCFF" scope="row"><p>Adresse de livreur:</p></th>
    <th bgcolor="#6699CC" scope="row"><p><input type="text" name="address1" id="address1" size="30"/></p></th>
  </tr>
  <tr>
    <th width="180" height="45" align="center" bgcolor="#99CCFF" scope="row"><p>Adresse de fournisseur:</p></th>
    <th bgcolor="#6699CC" scope="row"><p><input name="address2" type="text" id="address2" size="30" /></p></th>
  </tr>
  <tr>
    <th height="45" align="center" bgcolor="#99CCFF" scope="row"><p>Moyen de transport:</p></th>
    <th bgcolor="#6699CC" scope="row"><select id="travelMode" name="travelMode" >
						<option value="driving">Voiture</option> 
						<option value="walking">Avion</option> 
						<!--<option value="bicycling">bicyclette</option>  -->
	  </select></th>
  </tr>
  <tr>
    <th colspan="2" scope="row">
      <p>
        <input type="button" value="Show" onClick="initialize();"/>
      </p></th>
  </tr>
  
  <tr bgcolor="#6699CC" >
    <th colspan="2" scope="row">
    <center><div style="width:100%; height:8%" id="distance_direct"></div></center>	
	</th>
    </tr>
    
  <tr bgcolor="#6699CC">
    <th colspan="2" scope="row"><center><div style="width:100%; height:8%" id="distance_road"></div></center></th>
  </tr>
</table>

	
	
	<center><div id="map_canvas" style="width:60%; height:80%; display: inline-block;"></div></center> 
	
	<?php
	//if (isset($_GET['a1']) && isset($_GET['a2']))
	{
		echo "<script>start('34.73025763678509,10.754182909375004', 'Sidi Bouzid');</script>";
	}

	?>
</div>	
</body>
</html>